<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="../static/css/styleoneadd.css">
<link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<style>
    tr{
        cursor: pointer;
    }
</style>
    <!-- 内容主体区域 -->
<div class="layui-row layui-pad15" ng-app="getAllQuestion" ng-controller="addPaperController" id="addPaperController">
    <form class="layui-form" action="" lay-filter="test_form">
            <div class="layui-col-md12 layui-col-lh">
                <div class="layui-row layui-col-space10">
                     <div class="layui-col-xs2">
                         <input type="text" name="title" placeholder="题目名称" class="form-control" id="questionName">
                     </div>
                    <div class="layui-col-xs2">
                        <select name="city" class="form-control" id="classType" lay-ignore>
                            <option value="">问卷类型</option>
                            <option value="{{classType.typeName}}" data-ng-repeat="classType in classTypeList">{{classType.typeName}}</option>
                        </select>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-order-flexs">
                                <input type="text" class="form-control layui-gd-widths" placeholder="时间" id="test1">
                                &nbsp;&nbsp;至&nbsp;&nbsp;
                                <input type="text" class="form-control layui-gd-widths" placeholder="时间" id="test2">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs1 layui-text-right">
                        <button type="button" class="layui-btn  layui-t-h" ng-click="screen()">筛选</button>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 layui-col-lh">
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <table class="layui-data-zs" id="test3" border="1" style="    border: 1px solid #e5e5e5;">
                            <tr class="layui-t-h layui-hg" style=" background-color: #34C0E3;color: #ffffff;">
                                <th>&nbsp;&nbsp;</th>
                                <th>问题名称</th>
                                <th>分类</th>
                                <th>添加时间</th>
                            </tr>
                            <tr class="layui-hg" data-ng-repeat="question in questionList">
                                <td>
                                    <input type="radio" value="{{question.questionsId}}" name="wtname" lay-ignore style="display: inline-block;" />
                                </td>
                                <td><span ng-bind="question.content || '--'"></span></td>
                                <td><span ng-bind="question.classType || '--'"></span></td>
                                <td><span ng-bind="(question.createdTime|date:'yyyy-MM-dd') || '--'"></span></td>
                            </tr>
                        </table>
                        <div ng-show="!questionList || questionList.length == 0" style="margin: 20px 0; text-align: center;">无符合条件数据。</div>
                    </div>
                </div>
            </div>
            <!--分页-->
            <div class="layui-col-md12 layui-text-center" ng-hide="!questionList || questionList.length == 0">
                <div id="demo7"></div>
            </div>
            <!--分页end-->

            <div class="layui-col-md12  layui-text-center layui-col-lh">
                <a href="#" class="layui-q-c layui-zdy-bj" ng-click="addQuestionToPaper()">确定</a>
            </div>
    </form>


</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/angular.js"></script>
<script src="../static/js/app/consts/consts.js"></script>
<script>
    $(function () {
        // 表格点击选中
        $('#test3').on('click','tbody tr',function(){
            $(this).find('input[name=wtname]').prop('checked',true)
        })
    })
    var currentPageNumber = 1;
    var currentPageSize = 10;
    var currentPageCount = 0;

    var length = 0;

    var getAllQuestionURL = baseUrl + "/exam/getAllQuestion";
    var getAllClassTypeURL = baseUrl + "/exam/getAllClassType";
    var getPartQuestionURL = baseUrl + "/exam/getPartQuestion";
    var getQuestionURL = baseUrl + "/exam/getQuestion";

    var app = angular.module('getAllQuestion',['ng']);
    app.controller('addPaperController', function ($scope, $http) {
        $http({
            method: 'GET',
            params:{
                token:"11111",
                pageNumber: currentPageNumber,
                pageSize: currentPageSize,
                sort: "",
                desc: ""
            },
            url: getAllQuestionURL
        }).then(
            function successCallback(result) {
                if(result.data) {
                    var resultInfo = result.data.data;
                    updateUnitermPagination(resultInfo);
                    if(resultInfo) {
                        $scope.questionList = resultInfo.data;
                        console.log($scope.questionList);
                        length = $scope.questionList.length;
                    }
                }
            },
            function errorCallback(result) {
                console.log(result.data.message);
            }
        );
        $http({
            method: 'GET',
            params:{"token":"11111"},
            url: getAllClassTypeURL
        }).then(function successCallback(result){
            $scope.classTypeList = result.data.data;
            console.log($scope.classTypeList);
        });

        //筛选按钮
        $scope.screen = function (goPageNumber) {
            if(!goPageNumber) {
                currentPageNumber = 1;
            } else {
                currentPageNumber = goPageNumber;
            }
            var data = {
                token:"",
                content:$('#questionName').val()?($('#questionName').val()):"",
                type:$('#classType').val()?($('#classType').val()):"",
                startTime:$('#test1').val()?($('#test1').val()):"",
                endTime:$('#test2').val()?($('#test2').val()):"",
                pageNumber: currentPageNumber,
                pageSize: currentPageSize,
                sort: "",
                desc: ""
            }
            $http({
                method:"GET",
                params:data,
                url:getPartQuestionURL
            }).then(function successCallback(result) {
                if(result.data) {
                    var resultInfo = result.data.data;
                    updateUnitermPagination(resultInfo);
                    if(resultInfo) {
                        $scope.questionList = resultInfo.data;
                        length = $scope.questionList.length;
                    }
                }
            },function errorCallback(result) {
                console.log("error")
            });
        }
        
        //确定按钮
        $scope.addQuestionToPaper = function () {

            if(length === 0) {
                alertMsg("暂无数据，请检索其他条件或添加数据后重试");
                return
            }

            var questionsId = $("input[name='wtname']:checked").val();
            if(!questionsId) {
                alertMsg("请先选择数据");
                return
            }
            console.log(questionsId);
            $http({
                url:getQuestionURL,
                method:"GET",
                params:{
                    token:"987654",
                    questionsId:questionsId
                }
            }).then(function successCallback(result) {
                console.log(result.data.data.optionType);
                var data = result.data.data;
                console.log(data);
                var optionType = result.data.data.optionType;
                if(optionType === 1) {
                    danxuan(data);
                } else if (optionType === 2) {
                    duoxuan(data);
                }
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            });
        }
        
    });
    function duoxuan(data) {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh layui-form" lay-filter="test2" style="border:1px solid #ccc;">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md12" style="padding-left: 2rem;">';
        html += '<i class="layui-icon" style="font-size: 18px;float: right;margin-right: 5px;cursor: pointer" onclick="deleteDIV(this)">&#x1007;</i><span style="font-size: 15px;font-weight: bold">'+ data.content+'</span>';
        html += '<input type="hidden" value="' + data.questionsId + '"/>';
        html += '</div>';
        html += '<div class="layui-col-md12 layui-left-pad15">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md3 layui-margin-bot" style="width: 100%;">';
        var answers = data.answers;
        for(var i = 0 ;i < answers.length; i++) {
            html += '<div class="layui-mingzi" style="display: inline-block;float: none">';
            html += '<input type="checkbox" name="" lay-skin="primary" >';
            html += '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i> </div>';
            html += '<label style="font-weight: normal;margin-left: 3px;">' + answers[i].content + '</label>';
            html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';

        $(window.parent.document.getElementById("addQuestionStyle")).append(html);
    }

    //单选题目展示
    function danxuan(data) {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh" lay-filter="test2" style="border:1px solid #ccc;">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md12" style="padding-left: 2rem;">';
        html += '<i class="layui-icon" style="font-size: 18px;float: right;margin-right: 5px;cursor: pointer" onclick="deleteDIV(this)">&#x1007;</i><span style="font-size: 15px;font-weight: bold">';
        html += data.content + '</span>';
        html += '<input type="hidden" value="' + data.questionsId + '"/>';
        html += '</div><div class="layui-col-md12 layui-left-pad15">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md3 layui-margin-bot" style="width: 100%;">';
        var answers = data.answers;
        for (var i = 0 ;i < answers.length; i++) {
            html += '<div class="layui-mingzi" style="display: inline-block;float: none">';
            html += '<input type="radio" name="sex" value="' + answers[i].content +'" title="' + answers[i].content + '"/>';
            html += '<div class="layui-unselect layui-form-radio">';
            html += '<i class="layui-anim layui-icon"></i><div>' + answers[i].content + '</div></div>';
            html += '</div>';
        }
        html += '</div>';
        html += '</div></div></div></div>';

        $(window.parent.document.getElementById("addQuestionStyle")).append(html);

    }

    function alertMsg(msg) {
        layui.use(['layer'], function () {
            var layer = layui.layer;
            layer.msg(msg);
        });
    }

    // 获取angular scope
    function getAngularScope() {
        return angular.element(addPaperController).scope();
    }
    
    function updateUnitermPagination(resultInfo) {
        currentPageCount = resultInfo.total || 0;
        currentPageSize = resultInfo.pageSize || 10;
        currentPageNumber = resultInfo.pageNumber || 1;
        refreshPagination();
    }
    
    // 分页刷新
    function refreshPagination() {
        layui.use(['laypage', 'layer'], function() {
            var laypage = layui.laypage;
            //分页
            laypage.render({
                elem: 'demo7'
                ,count: currentPageCount
                ,curr: currentPageNumber
                ,limit: currentPageSize
                ,theme: '#34C0E3'
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                ,jump: function(obj, first) {
                    if (!first) {
                        currentPageNumber = obj.curr;
                        currentPageSize = obj.limit;
                        var scope = getAngularScope();
                        scope.screen(currentPageNumber);
                    }
                }
            });
        });
    }

    //Demo
    layui.use(['form','laypage','laydate','table','layer'], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        var laypage = layui.laypage

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        // 日期
        laydate.render({
            elem: '#test1' //指定元素
            ,theme: '#34C0E3'
        });
        laydate.render({
            elem: '#test2' //指定元素
            ,theme: '#34C0E3'
        });
        //分页
//        laypage.render({
//            elem: 'demo7'
//            ,count: 100
//             ,theme: '#34C0E3'
//            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
//            ,jump: function(obj){
//                console.log(obj)
//            }
//        });

    });
</script>


